<!DOCTYPE html>
<html>
<head lang="zh">
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="full-screen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta content="telephone=no,email=no" name="format-detection">
    <meta http-equiv="content-type" content="text/html">
    <title>签到表</title>
    <link href='../public/css/calendar.css' rel='stylesheet'/>
    <style>
        body {
            position: fixed;
            margin: 0;
            padding: 0;
            font-family: "Lucida Grande", Helvetica, Arial, Verdana, sans-serif;
            font-size: 14px;
        }

        #calendar {
            max-width: 900px;
            margin: 0 auto;
        }

        #calendar td {
            text-align: center;
        }

        .fc-toolbar {
            background: #2cc57b;
            margin: 0;
        }

        .fc-toolbar h2 {
            font-weight: normal;
        }

        .fc-toolbar .fc-center {
            width: 100%;
            position: relative;
        }

        /*    这个是包含title的div,有不只含有title时才会有这个div,因为没有class,只好这样写了*/
        .fc-center > div:first-child {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            -webkit-justify-content: center;
            justify-content: center;
            width: 100%;
            height: .395rem;
            color: #fff;
        }

        .fc-toolbar button:focus {
            outline: none;
        }

        .fc-toolbar button {
            background: transparent;
            margin: 0 .2rem;
            border: 0;
            box-shadow: none;
        }

        .fc-icon::after {
            font-weight: normal;
            color: #fff;
        }

        .fc-head .fc-day-header {
            border: 0;
            font-size: .12rem;
            line-height: .312rem;
        }

        .fc-head .fc-head-container {
            border: 0;
        }

        .fc-head .fc-row {
            display: -ms-flexbox; /* TWEENER - IE 10 */
            display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
            display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
            display: -webkit-flex; /* NEW - Chrome */
            display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */

            -ms-flex-direction: column;
            -moz-box-orient: vertical;
            -webkit-box-orient: vertical;
            -webkit-flex-direction: column;
            flex-direction: column;

            height: .5rem;
        }

        .person-name {
            font-size: .152rem;
            font-weight: bold;
            padding: .02rem 0 .03rem;
            background: #ddd;
            color: #222;
            height: 25px;
            line-height: 25px;
        }

        #calendar .fc-body {
            border: 7px solid #ddd;
            border-right: 12px solid #ddd;
            border-left: 12px solid #ddd;
        }

        .fc-body .fc-row .fc-bg .fc-day > span {
            height: .104rem;
            position: absolute;
            left: 0;
        }

        .fc-basic-view .fc-body .fc-row {
            position: relative;
        }

        .fc-row .fc-content-skeleton {
            position: absolute;
            top: .18rem;;
            bottom: 0;
            margin: auto 0;
            padding-bottom: 0;
            height: 60%;
        }

        .fc-basic-view td.fc-day-number {
            padding: 0;
        }

        .fc-row .fc-day-number {
            font-size: .12rem;
        }

        .fc-unthemed .fc-today {
            background: white;
        }

        .fc-ltr .fc-basic-view .fc-today {
            color: #2cc57b;
        }

        .inline-block {
            display: inline-block;
            width: 100%;
        }

        .intro {
            display: -webkit-box;
            display: flex;
            -webkit-box-pack: justify;
            justify-content: space-around;
            margin: .175rem .07rem;
        }

        .signed-intro > .inline-block, .missed-intro > .inline-block, .day-work-intro > .inline-block {
            width: .2rem;
            height: .105rem;
        }

        .signed {
            color: #85d355;
            background: #85d355;
        }

        .missed {
            color: #e55427;
            background: #e55427;
        }

        .day-work {
            color: #e8ac39;
            background: #e8ac39;
        }

        /*truexin:自己加入的样式: */
        .fc-toolbar {
            height: 50px;
            line-height: 50px;
        }

        thead.fc-head > tr {
            height: 40px;
        }

        .person-name {
            height: 20px;
            line-height: 20px;
        }

        .fc-head .fc-day-header {
            line-height: 20px;
        }

        .fc-row.fc-widget-header table tr {
            height: 20px;
            background: #ddd;
            border-color: #ddd;
        }

    </style>
    <script src='../public/js/lib/calendar.min.js'></script>
    <script>
        var log = function (msg) {
            console.log(msg);
        };

        var staffName = '邹新许';
        //上一月/下一月按钮事件
        var clickFn = function () {
            //show name
            var header = $('.fc-head .fc-widget-header');
            //find 包括了自己
            if (header.find('div').length > 1) log('div');
            else {
                var div = document.createElement('div'),
                //TODO
                //div_text = document.createTextNode('林灿荣');
                    div_text = document.createTextNode(staffName);
                div.className = 'person-name';
                div.appendChild(div_text);

                var table = header.find('table')[0];
                table.parentNode.insertBefore(div, table);
            }

            //stretch table
            $('.fc-day-grid-container').css({height: 'auto'});

            //add colorful span
            $('.fc-body').find('.fc-bg').find("td:not('.fc-future, .fc-other-month')")
            .each(function (i, td) {
                //log(td);

                td.style.cssText = 'position:relative;';

                //TODO 根据不同状态,区分使用class
                var span = document.createElement('span');
                span.className = 'inline-block signed';
                td.appendChild(span);
            });

        };

        $(document).ready(function () {

            $('#calendar').fullCalendar({
                header: {
                    left: '',
                    center: 'prev,title,next',
                    right: '',
                },
                lang: 'zh-cn',

            });

            clickFn();
            $('.fc-button').bind('click', clickFn);
        });
    </script>

</head>
<body>

<div id="calendar"></div>
<div class="intro">
    <div class="signed-intro">
        <span class="signed inline-block"></span>
        <span>已签到</span>
    </div>
    <div class="missed-intro">
        <span class="missed inline-block"></span>
        <span>已错过</span>
    </div>
    <div class="day-work-intro">
        <span class="day-work inline-block"></span>
        <span>白班</span>
    </div>
</div>

</body>
</html>



